<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <script src="/kissy/build/seed-debug.js" charset="utf-8"></script>
    <script src="/kissy/src/package.js"></script>
    <script src="/kissy/src/log.js"></script>
    <style>
        #upper {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: #ffff00;
        }

        #under {
            width: 200px;
            height: 200px;
            border: 1px solid green;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div id="under"></div>
<div id="upper"></div>
<script>
    KISSY.use('node, event/gesture/tap', function (S, Node, TapType) {
        var $ = Node.all;
        $('#upper').on(TapType.TAP, function (e) {
            log('upper ' + e.type);
            $(this).hide();
            e.preventDefault();
        });
        $('#upper').on('click', function (e) {
            log('upper ' + e.type);
        });
        $('#under').on([TapType.TAP , 'click'], function (e) {
            log('under ' + e.type);
        });
    });
</script>
</body>
</html>